import React, { useMemo } from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import dayjs from 'dayjs';

import { ReactComponent as ChartImg } from '@/assets/icons/icon_chart_img.svg';
import { ReactComponent as ChartVideo } from '@/assets/icons/icon_chart_video.svg';
import getFlowUnit from '@antelopecloud/utils/lib/unit/getFlowByUnit';

import styles from './index.less';

interface PayloadState {
  value: string;
}

const Chart = (props: { data: any }) => {
  const {
    data: { objectStatistics = [] },
  } = props;

  // 处理一遍
  const chartData = useMemo(() => {
    const result: any[] = [];
    objectStatistics.forEach((item: any) => {
      const { num, space, timestamp } = item;
      const { snapshot } = num;
      const { record } = space;
      const name = dayjs(timestamp * 1000).format('MM-DD');
      const b = Number(
        getFlowUnit(
          'GB',
          record,
          {
            scale: 1024,
            showUnit: false,
            precision: 0,
          },
          false,
        ),
      );
      result.push({
        name,
        a: snapshot,
        b,
      });
    });
    console.log(result.length);

    if (result.length > 7) result.shift();

    return result;
  }, [objectStatistics]);

  const CustomTooltip = (tooltipProps: {
    active?: boolean;
    payload?: PayloadState[];
  }) => {
    const {
      active = false,
      payload = [{ value: '' }, { value: '' }],
    } = tooltipProps;

    if (active) {
      return (
        <div className={styles.tooltip}>
          <div className={styles.name}>
            <i style={{ background: '#1890FF' }} />
            <span> {`图片 ： ${payload[0].value}张`}</span>
          </div>
          <div className={styles.name}>
            <i style={{ background: '#FFAA00' }} />
            <span>{`视频 ： ${payload[1].value}G`}</span>
          </div>
        </div>
      );
    }

    return null;
  };
  return (
    <div className={styles.chart}>
      <div className={styles.chart_title} style={{ marginBottom: 10 }}>
        <div>
          <h3>数据接入趋势（近一周）</h3>
        </div>
        <div>
          <span>
            <ChartImg /> 图片
          </span>
          <span style={{ marginLeft: 20 }}>
            <ChartVideo /> 视频
          </span>
        </div>
      </div>
      <div className={styles.chart_title}>
        <div>条</div>
        <div>GB</div>
      </div>
      <ResponsiveContainer height={240}>
        <LineChart
          data={chartData}
          margin={{
            top: 10,
            bottom: 10,
            left: -16,
            right: -16,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="name" axisLine />
          <YAxis yAxisId="left" axisLine={false} tickLine={false} />
          <YAxis
            yAxisId="right"
            orientation="right"
            axisLine={false}
            tickLine={false}
          />
          <Tooltip content={<CustomTooltip />} />
          <Line
            yAxisId="left"
            type="monotone"
            dataKey="a"
            stroke="#1890FF"
            dot={false}
          />
          <Line
            yAxisId="right"
            type="monotone"
            dataKey="b"
            stroke="#FFAA00"
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

export default Chart;
